<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 600px;
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid #ccc;
        }
        tr{
            text-align: center;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <!--1.引入模板引擎的js文件-->
    <script src="js/template.js"></script>
    <!--2.定义模板-->
    <script type="text/html" id="user">
        {{ each data as user index }}
        <tr>
            <td>{{ index+1 }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.address }}</td>
            <!--<td>{{ user.status==1?'启用':'禁用' }}</td>-->
            <td>
                {{ if user.status==1 }}
                    启用
                {{ else if user.status==0 }}
                    禁用
                {{ else }}
                    未知
                {{ /if }}
            </td>
            <td>
                <button>修改</button>
                <button onclick="doDelete({{ user.id }})">删除</button>
            </td>
        </tr>
        {{ /each }}
    </script>
    <script>
        $(function () {
            $.ajax({
                type:'get',
                url:'findAll.user',
                dataType:'json',
                success:function(res){
                    if(res.status == 1){
                        // for(var user of res.data){
                        //     var tr = $('<tr>')
                        //         .append($('<td>').text(user.id))
                        //         .append($('<td>').text(user.name))
                        //         .append($('<td>').text(user.phone))
                        //         .append($('<td>').text(user.address))
                        //         .append($('<td>').text(user.status==1?'启用':'禁用'))
                        //         .append($('<td>')
                        //                     .append($('<button>修改</button>'))
                        //                     .append($('<button>删除</button>'))
                        //         )
                        //     $('#tb').append(tr)
                        // }

                        // 3.渲染模板
                        var html = template('user',res)
                        $('#tb').html(html)
                    }
                }
            })

            $('#btnAdd').on('click',function () {
                location.href = 'add.html'
            })
        })
        
        function doDelete(id) {
            $.ajax({
                url:'deleteById.user',
                data:{ id:id },
                dataType:'json',
                success: function(res){
                    if(res.status == 1){
                        location.reload() // 刷新页面
                    }
                }
            })
        }
    </script>
</head>
<body>
    <h2>用户信息列表</h2>
    <button id="btnAdd">添加用户</button>
    <br><br>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
</body>
</html>